<template>
    <div style="height: 100%; width: 100%;display: flex;flex-direction: column;">

        <div style="width: 100%;height: 10%; display: flex;flex-direction: row;align-items: center;">
            <el-input style="width: 800px; margin-left: 2%" size="small" placeholder="请输入查询的无人机id"
                      v-model="droneDeviceId"></el-input>
            <el-button style="margin-left: 2%;" size="small" type="primary" @click="getDeviceList()">查询</el-button>
            <el-button style="margin-right: 2%;" size="small" type="success" @click="resetTerm()">重置</el-button>
        </div>

        <div class="table_main">
            <ElTable
                    :data="droneData"
                    :header-cell-style="{color: '#ffffff',background: '#6f7f93'}"
                    class="table_border"
                    :highlight-current-row="false">

                <ElTableColumn prop="droneDeviceId" label="无人机ID" width="100" align="center" show-overflow-tooltip/>

                <ElTableColumn prop="droneDeviceName" label="无人机名称" align="center" width="200"
                               show-overflow-tooltip/>

                <ElTableColumn prop="droneDeviceType" label="无人机类型" width="200" align="center"
                               show-overflow-tooltip/>

                <ElTableColumn prop="compName" label="所属公司" width="200" align="center"
                               show-overflow-tooltip/>

                <ElTableColumn prop="droneDeviceState" label="无人机状态" width="200" align="center"
                               show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-show="scope.row.droneDeviceState == 0">在线</span>
                        <span v-show="scope.row.droneDeviceState == 1">离线</span>
                    </template>
                </ElTableColumn>

                <ElTableColumn label="操作" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <ElButton
                                type="success" size="small"
                                @click="handleView(scope.$index, scope.row)">查看
                        </ElButton>
                        <ElButton
                                type="warning" size="small"
                                @click="handleEdit()">编辑
                        </ElButton>
                        <ElButton
                                type="danger" size="small"
                                @click="handleDelete(scope.row.droneDeviceId)">删除
                        </ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
        </div>
        <ElPagination
                background
                layout="prev, pager, next,jumper, ->, total"
                :currentPage="queryTerms.currentPage"
                :page-size="queryTerms.size"
                :total="queryTerms.total"
                @current-change="handleCurrentChange"
                style="text-align: center;"
        />

    </div>

</template>

<script>
    import webSetInfo from "../server/webSetInfo";

    export default {
        data() {
            return {
                userInfo: {
                    userId: '',
                    token: '',
                    userName: '',
                    userPhone: '',
                    compId: '',
                    userPriority: ''
                },
                compName: '',
                queryTerms: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                },
                droneData: [],
                droneDeviceId: '',
                droneEdit:{},
                editShow: false
            }
        },
        mounted() {
            this.userInfo = this.$store.state.userAllInfos;
            if (this.userInfo == null) {
                this.$router.push({
                    path: '/login'
                })
            } else {
                this.getDeviceList();
            }
        },
        methods: {
            getDeviceList() {
                this.$axios_token({
                    url: `${webSetInfo.apiUrl}` + `/device/getDevice`,
                    method: "post",
                    data: {
                        pageSize: this.queryTerms.pageSize,
                        pageNo: this.queryTerms.currentPage,
                        droneDeviceId: this.droneDeviceId
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if (response.code == 200) {
                            if (data.records.length === 0) {
                                this.$message.error("暂无更多数据")
                            } else {
                                this.loadData(data)
                            }
                        }
                    })
            },

            loadData(e) {
                this.droneData = e.records;
                this.queryTerms.currentPage = parseInt(e.current);
                this.queryTerms.pageSize = parseInt(e.size);
                this.queryTerms.total = parseInt(e.total);
            },

            handleEdit() {
                this.editShow = true;



                this.$confirm(`确定修改吗？` , '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios_token({
                        url: `${webSetInfo.apiUrl}` + `/device/updateDevice`,
                        method: "post",
                        data: this.droneEdit
                    })
                        .then(response => {
                            if (response.code == 200 && response.data) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                //重新加载
                                this.$nextTick(() => {
                                    this.getDeviceList();
                                })
                            } else {
                                this.$message.error("未知错误")
                            }
                        })
                }).catch(() => {
                    // 点击取消进行的操作
                });

            },

            handleClose() {
                this.editShow = false;
            },

            handleDelete(id) {
                this.$confirm(`确定删除吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios_token({
                        url: `${webSetInfo.apiUrl}` + `/device/deleteDevice`,
                        method: "post",
                        data: {
                            droneDeviceId: id
                        }
                    })
                        .then(res => {
                            if (res.code == 200 && res.data) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                //重新加载
                                this.$nextTick(() => {
                                    this.getDeviceList();
                                })
                            } else {
                                this.$message.error("未知错误")
                            }
                        })
                }).catch(() => {
                    // 点击取消进行的操作
                });
            },

            handleView() {

            },

            handleCurrentChange(e) {
                this.queryTerms.currentPage = e;
                this.getDeviceList();
            },

            resetTerm() {
                this.droneDeviceId = '';
            }
        }
    }
</script>

<style lang="scss" scoped>
    .table_main {
        margin-top: 30px;

        :deep(.el-table tr) {
            font-size: 16px;
        }

        .cell {
            padding-right: 10px;
            padding-left: 10px;
            overflow: hidden;
            line-height: 23px;
            white-space: normal;
            text-overflow: ellipsis;
            word-break: break-all;

            .dot {
                display: inline-block;
                width: 6px;
                height: 6px;
                margin-right: 5px;
                border-radius: 50%;
            }

            .orange-dot {
                background: #ff8a00;
            }

            .green-dot {
                background: #01ba62;
            }

            .red-dot {
                background: #ba0101;
            }

        }

        .btn_box {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Source Han Sans CN;

            .edit_btn {
                margin-right: 8px;
                color: #2871ff;
                cursor: pointer;
            }

        }

        :deep(.el-table thead) {
            color: #909399;
            font-weight: 500;
        }

        :deep(.el-table__body-wrapper) {
            background-color: #f6f9fc;
        }

        :deep(.el-table tr) {
            color: #333333;
        }

        :deep(.el-table th.el-table__cell.is-leaf) {
            border-bottom: 1px solid #f6f9fc;
        }

        :deep(.el-table th.el-table__cell) {
            color: #fff;
            background-color: #6f7f93;
        }

        :deep(.el-table .el-table__cell) {
            padding: 12px 0;
            /*background-color: #fff !important;*/
            border-bottom: 1px solid #f6f9fc;
        }

    }

    .pagination {
        position: fixed;
        right: 30px;
        bottom: 0;
        margin-bottom: 19px;

        :deep(.el-icon) {
            font-size: 19px !important;
        }

        :deep(.el-input__inner) {
            color: #4a4a4a;
        }

        :deep(.el-pagination .el-pager li) {
            color: #4a4a4a;
            font-size: 16px;
            background: none;
        }

        :deep(.el-pagination button) {
            background: none;
        }

        :deep(.el-input__wrapper) {
            background: none;
            border: 1px solid #4a4a4a;
            box-shadow: none;
        }

        :deep(.el-pagination__total) {
            color: #2871ff;
        }

        :deep(.el-pagination__jump) {
            color: #4a4a4a;
        }

    }

    .patient-pagination {
        height: 1rem;
        // line-height: ;
        display: flex;
        align-items: center;
        justify-content: center;
    }


</style>
